<template>
	<div class="flex-center h-16 leading-16 overflow-hidden whitespace-nowrap">
		<img class="w-auto h-8" :src="websiteConfig.logo" alt="" :class="{ 'mr-2': !themeStore.sider.collapsed }" />
		<h2 v-show="!themeStore.sider.collapsed" class="pl-8px text-16px font-bold transition-base">
			{{ websiteConfig.title }}
		</h2>
	</div>
</template>

<script setup lang="ts">
import { websiteConfig } from "@/config";
import { useThemeStore } from "@/store";
const themeStore = useThemeStore();

defineOptions({ name: "GlobalLogo" });

interface Props {
	/** 是否显示 */
	collapsed?: boolean;
}
defineProps<Props>();
</script>

<style lang="scss" scoped></style>
